import 'package:api/pages/apps/firstCompanyApp/base/base_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class GuidePage extends StatefulWidget {
  @override
  _GuidePageState createState() => _GuidePageState();
}

class _GuidePageState extends BasePage<GuidePage> {
  List<String> imgList = [
    "https://th.bing.com/th/id/Rbb2b2061c8b7089a8669c08bb7a9f98a?rik=n6D4IJT5%2f1wJ5w&pid=ImgRaw",
    "https://tse4-mm.cn.bing.net/th/id/OIP.fWBhFU0EvGIwOyPHEoeAYwHaPN?pid=ImgDet&rs=1",
    "https://img.zcool.cn/community/019a4a5abd9d8ba8012062e38b7a17.jpg@1280w_1l_2o_100sh.jpg"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Swiper(
        itemBuilder: (BuildContext context, int index) {
          if (index == 2) {
            return Stack(
              children: [
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  top: 0,
                  child: Image.network(
                    "${imgList[index]}",
                    fit: BoxFit.fill,
                  ),
                ),
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  top: 0,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("上高水长",
                          style: TextStyle(color: Colors.white, fontSize: 22)),
                      Text("flutter-X与你同行",
                          style: TextStyle(color: Colors.white, fontSize: 22)),
                    ],
                  ),
                ),
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: 120,
                  child: Center(
                    // 在这里包裹一层material的原因是switch组件 去除了material的风格，导致ink 没有了水波纹的样式
                    child: Material(
                      borderRadius: BorderRadius.all(Radius.circular(22)),
                      child: Ink(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(22)),
                          color: Colors.white,
                        ),
                        child: InkWell(
                          onTap: () {
                            pushHomePage();
                          },
                          borderRadius: BorderRadius.all(Radius.circular(22)),
                          splashColor: Colors.grey,
                          child: Container(
                            alignment: Alignment.center,
                            width: 120,
                            height: 40,
                            child: Text("立即体验",
                                style: TextStyle(
                                    color: Colors.blue, fontSize: 20)),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          }
          return Image.network(
            "${imgList[index]}",
            fit: BoxFit.fill,
          );
        },
        loop: false,
        // 轮播个数
        itemCount: 3,
        // 轮播图的指示点
        pagination: new SwiperPagination(),
        // 左右的控制器
        // control: new SwiperControl(),
      ),
    );
  }
}
